<template>
  <div class="box">
    <Top></Top>
    <div class="banner">
      <img src="../assets/weimg.jpg" />
    </div>
    <div class="imgtext">
      <div class="imgtexts" v-for="imgtexts in imgtext" :key="imgtexts.id">
        <div class="leftimg">
          <img :src="imgtexts.img" />
        </div>
        <div class="texts">
          <p class="p1">{{imgtexts.p1}}</p>
          <p class="p2">{{imgtexts.p2}}</p>
        </div>
      </div>
    </div>
    <div class="qywenhua">
      <h1>企业文化</h1>
      <div class="sm">
        <div class="smcon">
          <dl
            v-for="shiming in smdl"
            :key="shiming.id"
            @mousemove="jingguo(shiming.dlid)"
            @mouseout="likai(shiming.dlid)"
            :class="dlid==shiming.dlid?'bbc':''"
          >
            <dt :class="dlid==shiming.dlid?'ccc':''">
              <img :src="shiming.img1" v-show="dlid!==shiming.dlid" />
              <img :src="shiming.img2" v-show="dlid==shiming.dlid" />
            </dt>
            <dd class="pname">{{shiming.name}}</dd>
            <dd>{{shiming.text}}</dd>
          </dl>
        </div>
      </div>
      <div class="gy4">
        <h1>关于我们</h1>
        <div class="div4">
          <div
            class="divfor"
            v-for="divfor in fordiv"
            :key="divfor.id"
            @mousemove="djg(divfor.dv)"
            @mouseout="dlk(divfor.dv)"
            :class="dv==divfor.dv?'dvclass':''"
          >
            <p class="tp1">{{divfor.textp}}</p>
            <p class="tp2">{{divfor.textt}}</p>
          </div>
        </div>
      </div>
    </div>
    <div class="inputs">
      <div class="topbox">
        <div class="left">
          <p v-for="tpos in boxs" :key="tpos.id">
            <img :src="tpos.img" />
            {{tpos.name}}
          </p>
        </div>
        <div class="right">
          <h1>填写留言</h1>
          <form action="form_action.asp" method="get">
            <input type="text" placeholder="昵称:" />
            <input type="email" placeholder="邮箱:" />
            <input type="phone" placeholder="电话:" />
            <textarea cols="70%" rows="10" placeholder="请输入留言..."></textarea>
            <p class="tijiao">
              <submit>提交</submit>
            </p>
          </form>
        </div>
      </div>
      <div class="ditu">
        <h2>详细地图:</h2>
        <div class="dituimg">
          <img src="../assets/ditu.png"/>
        </div>
      </div>
    </div>
    <Bott></Bott>
  </div>
</template>
<script>
import Top from "../components/top.vue";
import Bott from "../components/bott.vue";
export default {
  components: { Top, Bott },
  data() {
    return {
      dlid: 0,
      dv: 0,
      imgtext: [
        {
          img: require("../assets/jnimg.png"),
          p1: "关于我们",
          p2:
            "我们一直专注于互联网核心技术服务，为企业提供一站技术服务。主要业务范围有:小程序开发、微信开发、APP开发、电商系统开发、OA管理系统、CAL(人脸识别)开发等互联网+领域。我们致力于为企业提供可靠、稳定的技术研发支持。我们是一支追求品质完美、力求不断超越自己的团队，每一位成员是亲密的伙伴，与公司一起成长发展。我们珍惜每一次合作的机会，来挑战完美、精益求精的团队秉承专业的设计。"
        }
      ],
      smdl: [
        {
          dlid: 1,
          img1: require("../assets/xiaorenhei.png"),
          img2: require("../assets/xiaoren.png"),
          name: "企业使命",
          text:
            "提供有竞争力的方案和服务，为客户创造最大价值，为信息化时代贡献一份力量"
        },
        {
          dlid: 2,
          img1: require("../assets/xiaorenhei.png"),
          img2: require("../assets/xiaoren.png"),
          name: "企业理念",
          text:
            "提供有竞争力的方案和服务，为客户创造最大价值，为信息化时代贡献一份力量"
        },
        {
          dl: 3,
          img1: require("../assets/xiaorenhei.png"),
          img2: require("../assets/xiaoren.png"),
          name: "企业价值观",
          text:
            "提供有竞争力的方案和服务，为客户创造最大价值，为信息化时代贡献一份力量"
        }
      ],
      fordiv: [
        {
          dv: 1,
          textp: "666³",
          textt: "客户的选择"
        },
        {
          dv: 2,
          textp: "150³",
          textt: "客户的选择"
        },
        {
          dv: 3,
          textp: "30³",
          textt: "客户的选择"
        },
        {
          dv: 4,
          textp: "63³",
          textt: "客户的选择"
        }
      ],
      boxs: [
        {
          img: require("../assets/erjizi.png"),
          name: "联系我们"
        },
        {
          img: require("../assets/gongsi.png"),
          name: "山东柏瑞设计有限公司"
        },
        {
          img: require("../assets/dianhua.png"),
          name: "18317093686"
        },
        {
          img: require("../assets/xin.png"),
          name: "1164029542@qq.com"
        },
        {
          img: require("../assets/dingwei.png"),
          name: "济南市长清区崮云湖街道芙蓉路中国创新谷西城软件园A3楼503室"
        }
      ]
    };
  },
  methods: {
    jingguo(dlid) {
      this.dlid = dlid;
    },
    likai() {
      this.dlid = 0;
    },
    djg(dv) {
      this.dv = dv;
    },
    dlk() {
      this.dv = 0;
    }
  }
};
</script>